<template>
  <a-modal
    width="30%"
    :visible="allotVisible"
    @cancel="cancelAllotModal"
    @ok="handleAllot"
    title="科目分配教师"
  >
    <div class="allot-modal">
      <div class="allotTitle">分配科目:{{ `${curSubject.kmdm}(${curSubject.kmmc})` }}</div>

      <a-form-item label="评阅教师">
        <a-select
          v-model:value="Data.reviewerList"
          show-search
          mode="multiple"
          placeholder="请选择（可按工号搜索）"
          :filter-option="filterOption"
          :options="Data.teacherOptions"
          :field-names="{ label: 'jsxm', value: 'account' }"
        />
      </a-form-item>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { getTeacherCard } from '/@/api/system-manage/teacher-info'
import { useMessage } from '/@/hooks/web/useMessage'
import { getHasTeachee, allotTeacher } from '/@/api/organization/subjectManage'
const { createMessage } = useMessage()
const props = defineProps({
  curSubject: {
    type: Object,
    default: () => {},
  },
  allotVisible: {
    type: Boolean,
    default: false,
  },
})

const Data = reactive({
  reviewerList: [],
  teacherOptions: [],
  paramsList: [],
} as any)

const emit = defineEmits(['update:allotVisible'])

function filterOption(input: string, option: any = {}) {
  return option['jsxm']?.indexOf(input) >= 0
}

// 教师列表
const getTeacherOptions = async val => {
  const { data } = await getTeacherCard({
    pageSize: 0,
    account: val,
  })
  data.forEach(element => {
    element.jsxm = `(${element.jsxm})${element.account}`
  })
  Data.teacherOptions = data
}



/**
 * 关闭弹窗
 */
function cancelAllotModal() {
  emit('update:allotVisible', false)
}
/**
 * 分配教师
 */
async function handleAllot() {
  const { code, message } = await allotTeacher({
    accountList: Data.reviewerList,
    kmdm: props.curSubject.kmdm,
  })
  if (code === 200) {
    cancelAllotModal()
    createMessage.success('分配成功')
  } else {
    createMessage.error(message)
  }
}

watch(
  () => props.allotVisible,
  async val => {
    Data.reviewerList = []
    !Data.teacherOptions.length && getTeacherOptions('')
    if (val) {
      const { data, code } = await getHasTeachee({ kmdm: props.curSubject.kmdm })
      if (code == 200) {
        for (let key in data) {
          Data.reviewerList.push(key)
        }
      }
    }
  }
)
</script>

<style lang="less" scoped>
.allot-modal {
  padding: 20px;
  .allotTitle {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
